<template>
  <view class="container">
    <view class="list" v-if="dataLits.length > 0">
      <view class="list-header">
        <view style="width: 30%; display: inline-block">发生明细</view>
        <view style="width: 30%; display: inline-block">事由</view>
        <view style="width: 25%; display: inline-block">余额变动</view>
        <view style="width: 15%; display: inline-block">余额</view>
      </view>
      <view class="list-content">
        <view
          class="content-item"
          style="width: 25%; margin-right: 5%; line-height: 44rpx"
          >2024-05-26 12:12:12</view
        >
        <view class="content-item" style="width: 30%">AI视频生成</view>
        <view class="content-item" style="width: 25%">-10</view>
        <view class="content-item" style="width: 15%">9</view>
      </view>
      <view class="list-content">
        <view
          class="content-item"
          style="width: 25%; margin-right: 5%; line-height: 44rpx"
          >2024-05-26 12:12:12</view
        >
        <view class="content-item" style="width: 30%">AI视频生成</view>
        <view class="content-item" style="width: 25%">-10</view>
        <view class="content-item" style="width: 15%">9</view>
      </view>
      <view class="list-content">
        <view
          class="content-item"
          style="width: 25%; margin-right: 5%; line-height: 44rpx"
          >2024-05-26 12:12:12</view
        >
        <view class="content-item" style="width: 30%">AI视频生成</view>
        <view class="content-item" style="width: 25%">-10</view>
        <view class="content-item" style="width: 15%">9</view>
      </view>
    </view>
    <uv-empty
      v-if="dataLits.length <= 0"
      mode="message"
      text="暂无账单明细"
      textColor="#000"
      icon="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2025/01/24/cf3aa70933d942a7a7a71ea378bb4c50.png"
    ></uv-empty>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      dataLits: [],
    };
  },
  methods: {
    issue() {
      app.navigationTo("page_account/activity/issue");
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  min-height: 100vh;
  width: 100vw;
  padding: 22rpx;
  padding-bottom: calc(96rpx + 32rpx + 22rpx);
  box-sizing: border-box;
  background: #f7f8fa;

  .button-fb {
    position: fixed;
    bottom: 32rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 480rpx;
    height: 96rpx;
    background: linear-gradient(180deg, #886ae6 0%, #4635ff 99%);
    border-radius: 48rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 96rpx;
    text-align: center;
  }

  .list {
    background: #ffffff;
    box-sizing: border-box;
    padding: 0 24rpx 48rpx 24rpx;

    .list-header {
      height: 124rpx;
      line-height: 124rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      text-align: left;
    }

    .list-content {
      height: 88rpx;
      line-height: 88rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      text-align: left;
      margin-bottom: 64rpx;

      .content-item {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
}
</style>
